<template>
	<div class="main">
		<div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;flex:1;flex-wrap: wrap;">
				<el-select v-model="searchParamCp.type" style="width: 200px;" placeholder="请选择轮播图类型" clearable>
					<el-option v-for="(item, index) in $store.getters.banner_type" :key="`banner-${index}`" :value="index"
						:label="item"></el-option>
				</el-select>
				<el-button style="margin-left: 10px;" type="primary" @click="searchinfo">搜索</el-button>
				<!-- <el-input v-model="searchParam.keyword" placeholder="请输入姓名/昵称/联系方式" style="width:200px"></el-input>
				<el-select v-model="searchParam.type" placeholder="请选择用户角色" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in typeList" :key="index" :label="item.title" :value="item.id">
				    </el-option>
				</el-select>
				<el-select v-model="searchParam.status" placeholder="请选择认证状态" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in statusList" :key="index" :label="item" :value="index">
				    </el-option>
				</el-select>
                <el-date-picker style="width:340px" clearable class="ml-10" v-model="searchParam.search_time"
                    value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <div class="ml-10" >
                    <el-button type="primary" @click="reset">重置</el-button>
                </div> -->
			</div>
			<div style="display: flex;">
				<el-button type="primary" @click="add()">添加</el-button>
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="importExcel()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
				<!-- <eluploadfile v-if="$auth('import')" :auto-upload="false" :upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				    <el-button type="primary" >导入</el-button>
				</eluploadfile> -->
				<!-- <el-button type="primary" @click="exportExcel">导出</el-button> -->
				<el-button style="margin-left: 10px;" type="danger" @click="selectdel"
					:disabled="!selection.length">批量删除</el-button>
			</div>
		</div>
		<el-table ref="table" class="main-table" header-align="center" border :data="list"
			@selection-change="onSelectionChange" height="100%" row-key="id" header-cell-class-name="main-table-header"
			@row-click="onRowClick">
			<el-table-column type="selection" width="50"> </el-table-column>
			<!-- <el-table-column  show-overflow-tooltip label="社区名称" prop="mass_name"></el-table-column> -->
			<el-table-column label="banner图">
				<template slot-scope="{row}">
					<el-image style="width:60px;height:60px" :src="row.img" :preview-src-list="[row.img]">
					</el-image>
				</template>
			</el-table-column>
			<!-- type  1首页轮播图2商城轮播图3课程轮播图4活动轮播图5老师轮播图 6.新闻轮播图 -->
			<!-- <el-table-column label="轮播图类型" prop="type">
				<template slot-scope="{row}">
					<el-tag v-if="row.type == 1">首页轮播图</el-tag>
					<el-tag v-if="row.type == 2" type="success">商城轮播图</el-tag>
					<el-tag v-if="row.type == 3" type="success">课程轮播图</el-tag>
					<el-tag v-if="row.type == 4" type="info">活动轮播图</el-tag>
					<el-tag v-if="row.type == 5" type="warning">老师轮播图</el-tag>
					<el-tag v-if="row.type == 6" type="danger">新闻轮播图</el-tag>
				</template>
			</el-table-column> -->
			<!-- <el-table-column v-if="$route.query.type" show-overflow-tooltip label="联系方式" prop="mass_mobile" width="120px"></el-table-column> -->
			<!-- <el-table-column show-overflow-tooltip label="联系电话" prop="mass_mobile" ></el-table-column> -->
			<el-table-column label="创建时间" prop="createtime">
				<template slot-scope="{row}">
					{{ row.createtime | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="{row}">
					<el-button v-if="$auth('edit')" type="primary" @click.stop="add(row)">编辑</el-button>
					<el-button v-if="$auth('edit')" type="warning" @click.stop="add(row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchParam.page" :page-size="searchParam.limit"
			:total="searchParam.total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next">
		</el-pagination>
		<el-dialog :title="title" :key="formDataStatus" :visible.sync="centerDialogVisible" @close="onDialogClose"
			width="60%">
			<add @close="close" :formData="userinfo" @search="addcommunity"></add>
		</el-dialog>
	</div>
</template>
<script>
// import companyCate from '@/components/company-cate.vue'
// import supervisorSelect from '@/components/supervisor-select.vue'auth
import add from './components/add.vue'
import { imghttp, get, post, del } from '@/assets/js/http'
// import eluploadfile from '../../components/el-upload-file.vue'
export default {
	components: { add },
	data() {
		return {
			list: [],
			selection: [],
			addShow: false, //添加显示
			centerDialogVisible: false, //详情弹窗
			title: '', //弹窗标题
			userinfo: {}, //用户信息
			typeList: [{
				id: 1,
				title: '社区民警'
			}, {
				id: 2,
				title: '综治巡逻队员'
			}, {
				id: 3,
				title: '网格员'
			}], //角色1社区民警 2综治巡逻队员 3网格员
			statusList: ['未认证', '认证待审核', '认证通过', '认证驳回'], //认证状态 0未认证 1认证待审核 2认证通过 3认证驳回
			searchParam: {
				page: 1,
				limit: 20,
				total: 0,
				cadre_id: '',
				search_time: [],
				status: '',
				type: '',
				keyword: '',
			},
			searchParamCp: {
				status: '',
			},
			formDataStatus: false,
		}
	},
	created() {
		Object.assign(this.searchParam, this.$route.query ? this.$route.query : {})
		Object.assign(this.searchParamCp, this.$route.query ? this.$route.query : {})
		this.getList()
	},
	watch: {
		'$route': {
			deep: true,
			handler() {
				this.reset()
			}
		},
	},
	methods: {
		//获取社区列表
		async getList() {
			this.$loading()
			// let { list,total } = 
			await get({
				url: '/admin/basic.Village/index',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
					}
				}
			}).then(res => {
				this.list = res.list
				this.searchParam.total = res.total
				this.importindex = []
				this.$loading().close()
			})
		},
		//添加/编辑弹窗
		add(row) {
			if (row) { //编辑
				this.centerDialogVisible = true
				this.title = "编辑轮播图"
				get({
					url: '/admin/basic.Village/edit',
					params: {
						id: row.id
					}
				}).then(res => {
					this.userinfo = res.row
					this.userinfo.img = [{
						name: res.row.img,
						url: res.row.img,
					}]
					console.log(this.userinfo.img, 'this.userinfo.img')
				})

			} else { //添加
				this.userinfo = {
					order_id: ''
				}
				this.centerDialogVisible = true
				this.title = "添加轮播图"
			}
			this.formDataStatus = true;
		},
		//添加轮播图
		addcommunity(result) {
			const info = JSON.parse(JSON.stringify(result))
			info.img = info.img[0].url
			console.log(info)
			if (info.id) {
				post({
					url: '/admin/basic.Village/edit',
					data: info
				}).then(res => {
					this.close()
					this.getList()
				})
			} else {
				post({
					url: '/admin/basic.Village/add',
					data: info
				}).then(res => {
					this.close()
					this.getList()
				})
			}
		},
		//关闭弹窗
		close() {
			this.centerDialogVisible = false
			this.userinfo = null
		},
		reset() {
			this.searchParamCp = this.$options.data().searchParam
			this.searchParam = this.$options.data().searchParam
			this.getList()
		},
		searchinfo() {
			this.searchParam.page = 1
			this.searchParam = {
				...this.searchParam,
				...this.searchParamCp
			}
			this.getList()
		},
		onCurrentChange() {
			this.getList()
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		selectdel() {
			this.$confirm(
				`此操作将永久删除该${this.selection.length}个banner, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					let query = "?";
					for (let i = 0; i < this.selection.length; i++) {
						const item = this.selection[i];
						if (i > 0) {
							query += "&ids[]=" + item.id;
						} else {
							query += "ids[]=" + item.id;
						}
					}
					await del({
						url: "/admin/basic.Village/del" + query,
						successTip: true,
						loading: true
					});
					this.getList()
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: '/admin/server.Appeal/export',
				params: {
					...this.searchParamCp,
					...{
						search_time: this.searchParamCp.search_time && this.searchParamCp.search_time
							.length ? this.searchParamCp.search_time.join(' - ') : ''
					}
				}
			})
			let a = document.createElement('a');
			var url = URL.createObjectURL(res);
			a.href = url;
			a.click();
			this.$loading().close()
		},
		//导入
		async upload({
			raw
		}) {
			this.$loading({
				text: '导入中 请等待...'
			})
			console.log(raw)
			await imghttp({
				url: '/admin/basic.Masses/import',
				data: {
					file: raw
				},
				successTip: true
			})
			this.getList()
			this.$loading().close()
		},
		onDialogClose() {

		},

	}
}
</script>

<style>
.el-date-editor .el-range-separator {
	padding: 0;
}
</style>
